<template>
	<view class="index" :style="[pageStyle]" :class="themeName">
		<!-- #ifndef  H5 -->
		<u-sticky offset-top="0" h5-nav-height="0" bg-color="transparent">
			<u-navbar
				:is-back="false"
				:title="styles.title"
				:title-bold="true"
				:is-fixed="false"
				:border-bottom="false"
				:title-color="percent > 0.5 ? '#000' : styles.title_color == 1 ? '#fff' : '#000'"
				:background="{ background: 'rgba(256,256, 256,' + percent + ')' }"
			></u-navbar>
		</u-sticky>
		<!-- #ifdef MP -->
		<view class="capsule-tips flex" v-if="offTip">
			<text class="m-r-10">添加到”我的小程序”</text>
			<u-icon name="close" color="#FFFFFF" @click="clearIntervalFunc"></u-icon>
		</view>
		<!-- #endif -->
		<!-- #endif -->
		<bubble top="300rpx" :page="1" :discharge="isDischarge"></bubble>
		<lazy-component v-for="(item, index) in pagesData" :key="index">
			<view>
				<template v-if="item.name == 'search' && item.show">
					<w-search :content="item.content" :styles="item.styles" />
				</template>
				<template v-else-if="item.name == 'navigation' && item.show">
					<w-navigation @fromSun="fromSun" :content="item.content" :styles="item.styles" />
				</template>
				<template v-else-if="item.name == 'banner' && item.show">
					<w-banner :content="item.content" :styles="item.styles" />
				</template>
				<template v-else-if="item.name == 'notice' && item.show">
					<w-notice :content="item.content" :styles="item.styles" />
				</template>

				<!-- #ifdef MP-WEIXIN -->
				<template v-else-if="item.name == 'mnplive' && item.show">
					<w-mnplive :content="item.content" :styles="item.styles" />
				</template>
				<!-- #endif -->
			</view>
			<view slot="skeleton" style="height: 20vh"></view>
		</lazy-component>

		<view class="visual">
			<view class="flex">
				<image style="width: 31rpx; height: 31rpx" src="@/static/images/gengxin.png" mode=""></image>
				<view class="black bold lg m-l-20">最新更新</view>
			</view>
			<!-- 视频 -->
			<view v-if="appConfig.shenhe==0">
				<view class="flex m-t-30 v-boxs" v-for="(item, index) in shipinList" :key="index" @click="detail(item.id)">
					<image class="v-img" :src="item.image" mode=""></image>
					<view class="m-l-20">
						<view class="black bold md line-2" style="height: 75rpx">{{ item.name }}</view>
						<view class="back nr m-t-10" style="color: #008aff">{{ item.typestr }}</view>
						<view class="xs muted m-t-10">{{ item.time }}更新</view>
					</view>
				</view>
			</view>
			
			<!-- 商品 -->
			<view v-else-if="appConfig.shenhe==1">
				<view class="flex m-t-30 v-boxs" v-for="(k, m) in goodsList" :key="m" @click="detail2(k.id)">
					<image class="v-img" :src="k.image" mode=""></image>
					<view class="m-l-20">
						<view class="black bold md line-2" style="height: 75rpx">{{ k.name }}</view>
						<view class="back nr m-t-10" style="color: #008aff">￥{{ k.min_price }}</view>
						<view class="xs muted m-t-10">销量：{{ k.sales_num }}</view>
					</view>
				</view>
			</view>
		</view>

		<!-- #ifndef APP-PLUS -->
		<tabbar />
		<!-- #endif -->
		<!-- #ifdef APP-PLUS -->
		<tabbar v-show="showTabbar" />
		<!-- #endif -->
		<index-skeleton v-show="loading" />
		<u-back-top
			:scroll-top="scrollTop"
			:top="1000"
			:customStyle="{
				backgroundColor: '#FFF',
				color: '#000',
				boxShadow: '0px 3px 6px rgba(0, 0, 0, 0.1)'
			}"
		></u-back-top>

		<!-- #ifdef APP-PLUS -->
		<lyg-popup
			v-if="appConfig.app_pop_agreement"
			title="用户使用及隐私保护政策提示"
			protocolPath="/bundle/pages/server_explan/server_explan?type=1"
			policyPath="/bundle/pages/server_explan/server_explan?type=2"
			policyStorageKey="has_read_privacy"
		></lyg-popup>
		<!-- #endif -->
		<!-- #ifdef MP -->

		<!-- aiIndex -->
		<!-- <drag-button :isDock="true" @btnClick="btnClick"/> -->
		
		<!-- 用户隐私协议弹框 -->
		<privacy-popup v-model="showPrivacyPopup"></privacy-popup>
		<!-- #endif -->

		<!-- 无网络提示 -->
		<u-no-network z-index="1200" @retry="handleRetry"></u-no-network>

		<!-- 分享 -->
		<u-popup v-model="showShare" mode="bottom" border-radius="14" :closeable="false" :safe-area-inset-bottom="true" mask-close-able>
			<view class="coupons">
				<view class="c-num m-b-40">分享小程序可获得{{pyq_jf}}个积分</view>
				<view class="flex row-between c-boxs">
					<view @click="toShare">
						<image src="@/static/images/share1.png" mode=""></image>
						<view>微信好友</view>
					</view>
					<view @click="toShare">
						<image src="@/static/images/share2.png" mode=""></image>
						<view>朋友圈</view>
					</view>
					<!-- <view @click="toShareCopy">
						<image src="@/static/images/share3.png" mode=""></image>
						<view>复制链接</view>
					</view> -->
				</view>
			</view>
		</u-popup>
	</view>
</template>
<script>
import { copy } from '@/utils/tools.js';
import { apiIndex } from '@/api/store';
import { apiVisit } from '@/api/app';
import { mapActions } from 'vuex';
import dragButton from "@/components/drag-button/drag-button.vue";
export default {
	data() {
		return {
			isDischarge: false,
			styles: {},
			pagesData: [],
			shipinList: [],
			goodsList:[],
			loading: true,
			scrollTop: 0,
			policyStorageKey: 'had_read_privacy', // 保存是否同意协议缓存信息的key
			showTabbar: true, // 是否展示tabbar。 在app端&开启了强制弹窗同意协议，需同意才展示tabbar
			percent: 0,
			offTip: false,
			showPrivacyPopup: false, //微信用户隐私协议
			showShare: false ,//分享
			pyq_jf:0,
		};
	},
	components: {
		dragButton
	},
	methods: {
		...mapActions(['getConfig', 'getDecorateConfig', 'getUser']),
		handleRetry() {
			this.getConfig();
			this.getDecorateConfig();
			this.getUser();
		},
		getPageInfo() {
			apiIndex()
				.then((res) => {
					const {
						common: { title },
						common,
						content,
						shipin,
						goods
					} = res;

					uni.setNavigationBarTitle({
						title
					});
					this.styles = common;
					this.tempData = content.map((item, index) => {
						return {
							index,
							value: item
						};
					});
					this.splitSetData();
					this.shipinList = shipin;
					this.goodsList = goods;
				})
				.finally(() => {
					uni.stopPullDownRefresh();
					this.loading = false;
				});
		},
		splitSetData() {
			const item = this.tempData.shift();
			if (!item) return;
			this.$set(this.pagesData, item.index, Object.freeze(item.value));
			setTimeout(() => {
				this.splitSetData();
			}, 100);
		},
		onPageScroll(e) {
			const top = uni.upx2px(100);
			const { scrollTop } = e;
			this.percent = scrollTop / top > 1 ? 1 : scrollTop / top;
		},
		clearIntervalFunc() {
			this.offTip = false;
		},
		clearTipAuto() {
			let timeid = null;
			if (timeid) {
				clearTimeout(timeid);
			}
			timeid = setTimeout(() => {
				this.clearIntervalFunc();
			}, 5000);
		},
		detail(id) {
			this.$Router.push({
				path: '/others/pages/video_detail/video_detail',
				query: {
					id:id
				}
			});
		},
		detail2(id) {
			this.$Router.push({
				path: '/others/pages/goods_detail/goods_detail',
				query: {
					id:id
				}
			})
		},
		fromSun(payload) {
			console.log('孙传祖', payload);
			this.showShare = payload;
		},
		toShare() {
			this.showShare = false;
			uni.showModal({
				title: '温馨提示',
				content: '请点右上角“...”，转发给朋友',
				showCancel: false,
				success(res) {
					if (res.confirm) {
					}
				}
			});
		},
		btnClick() {
			uni.navigateTo({
				url: '/others/pages/aiIndex/aiIndex'
			})
		}
		// toShareCopy() {
		// 	this.showShare = false;
		// 	let str = '123';
		// 	copy(str);
		// },
		// onShareAppMessage() {
			
		// },
		// onShareTimeline() {
			
		// },
	},
	computed: {
		pageStyle() {
			const { background_color, background_image, background_type } = this.styles;
			if (background_type == 0) return;
			const style =
				background_type == 1
					? {
							'background-color': background_color
					  }
					: {
							'background-image': `url(${background_image})`
					  };
			return style;
		}

		// // #ifdef APP-PLUS
		// // 是否展示tabbar。 在app端&开启了强制弹窗同意协议，需同意才展示tabbar
		// showTabbar() {
		// 	let isShow = false
		// 	return uni.getStorageSync(this.policyStorageKey);
		// },
		// // #endif
	},
	onPullDownRefresh() {
		this.getPageInfo();
	},
	onPageScroll(e) {
		const { scrollTop } = e;
		this.scrollTop = scrollTop;
	},
	onLoad() {
		// #ifdef MP-WEIXIN
		wx.getPrivacySetting({
			success: (res) => {
				console.log(res, '------'); // 返回结果为: res = { needAuthorization: true/false, privacyContractName: '《xxx隐私保护指引》' }
				if (res.needAuthorization) {
					// 需要弹出隐私协议
					this.showPrivacyPopup = true;
				}
			},
			fail: (err) => {
				console.log(err);
			}
		});
		// #endif
		this.getPageInfo();
		// 分享得积分
		const {pyq_jf} = this.appConfig;
		this.pyq_jf = pyq_jf;
		// 访客记录
		apiVisit();
	},
	onHide() {
		this.isDischarge = true;
	},
	onShow() {
		this.isDischarge = false;
		// #ifdef MP
		wx.getUpdateManager().onUpdateReady(function () {
			wx.showModal({
				title: '更新提示',
				content: '新版本已经准备好，是否重启应用？',
				success(res) {
					if (res.confirm) {
						// 新的版本已经下载好，调用 applyUpdate 应用新版本并重启
						wx.getUpdateManager().applyUpdate();
					}
				}
			});
		});
		// #endif
	},
	watch: {},
	onReady() {
		// #ifdef MP
		const _this = this;
		wx.checkIsAddedToMyMiniProgram({
			success(res) {
				if (!res.added) {
					_this.offTip = true;
					_this.clearTipAuto();
				} else {
					return;
				}
			}
		});
		// #endif
	}
};
</script>

<style lang="scss">
.index {
	position: relative;
	background-repeat: no-repeat;
	background-size: 100% auto;
	overflow: hidden;
	min-height: calc(100vh - env(safe-area-inset-bottom));
}

// 胶囊提示
.capsule-tips {
	color: #ffffff;
	padding: 12rpx 18rpx;
	border-radius: 14rpx;
	background: rgba(0, 0, 0, 0.7);
	position: absolute;
	z-index: 9999;
	right: 25rpx;
}
.capsule-tips::after {
	content: '';
	border-bottom: 14rpx solid rgba(0, 0, 0, 0.7);
	border-right: 14rpx solid transparent;
	border-left: 14rpx solid transparent;
	position: absolute;
	top: -14rpx;
	right: 88rpx;
}
// 视频
.visual {
	margin: 20rpx;
	background-color: #ffffff;
	padding: 20rpx;
	border-radius: 10rpx;
	.v-boxs {
		.v-img {
			width: 330rpx;
			height: 200rpx;
		}
	}
}
// 分享
.coupons {
	background-color: #1f2022;
	font-size: 30rpx;
	color: #767676;
	text-align: center;
	padding: 80rpx 60rpx 65rpx 60rpx;

	.c-boxs {
		color: #fff;
		margin: 0 100rpx;
		image {
			width: 90rpx;
			height: 90rpx;
			margin-bottom: 18rpx;
		}
	}
}
</style>
